Skip to content

TT-7300 Mark Verses highlighting & Edit Reference (#314)#322

Merged
sarahentzel merged 1 commit into
developfrom
TT-7300-mark-vrs-hilite
May 26, 2026
Merged

TT-7300 Mark Verses highlighting & Edit Reference (#314)#322
sarahentzel merged 1 commit into
developfrom
TT-7300-mark-vrs-hilite

Conversation

@gtryus

@gtryus gtryus commented May 21, 2026

Copy link
Copy Markdown
Contributor

This PR improves Mark Verses on mobile and desktop so the waveform, table, and Edit Reference dialog stay aligned with the wireframes and behave correctly for partial marking, reference editing, and navigation.

  • Table - waveform sync & selection
  • Setment status colors (green / yellow / gray)
  • Edit Reference dialog

@gtryus gtryus changed the title TT-7335 Improve aesthetics of racetrack UI (#314) Mark Verses highlighting & Edit Reference (#314) May 21, 2026
@gtryus gtryus changed the title Mark Verses highlighting & Edit Reference (#314) TT-7300 Mark Verses highlighting & Edit Reference (#314) May 21, 2026
@gtryus gtryus requested a review from sarahentzel May 21, 2026 21:39
@gtryus gtryus force-pushed the TT-7300-mark-vrs-hilite branch 3 times, most recently from 6074f26 to 6654acf Compare May 26, 2026 18:28
@gtryus gtryus requested a review from Copilot May 26, 2026 18:31

Copilot AI left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

Improves the Mark Verses tool on both mobile and desktop by syncing the waveform with the table, introducing status-based segment colors (completed / current / unmarked), and replacing the old Edit Reference workflow with a passage-aware dropdown plus an undo stack. Also extends refMatch to accept same-verse letter-suffix ranges (e.g. 1:22a-b).

Changes:

  • New mark-verses utility modules (segment colors, passage verses, undo stack) with focused unit tests, plus expanded mobile component test coverage.
  • Wavesurfer/region hooks gain a statusSegmentColors / markVersesTailOpenRef path that recolors regions based on table completion and a targetRegion-aware goto/applyRegionAtPosition for click-to-seek.
  • Mobile and desktop PassageDetailMarkVerses are rewritten around debounced autosave, table-row highlighting, click-to-seek, and a passage-driven EditReferenceDropdown; the old explicit Save / "Done Editing" buttons and Confirm save dialog are removed in favor of autosave + a Reset confirmation.

Reviewed changes

Copilot reviewed 21 out of 21 changed files in this pull request and generated 3 comments.

Show a summary per file
File Description
src/renderer/src/utils/refMatch.ts Accept same-verse letter-suffix ranges like 1:22a-b
src/renderer/src/utils/markVersesUndoStack.ts / .test.ts New bounded LIFO undo stack for Mark Verses mobile
src/renderer/src/utils/markVersesSegmentColors.ts / .test.ts Shared completed/current/unmarked colors and row-completion helpers
src/renderer/src/utils/markVersesPassageVerses.ts / .test.ts Reference parsing/formatting and passage-driven ending-verse options
src/renderer/src/crud/useWavesurferRegions.tsx Status-color region painting, programmatic-seek suppression, split-truncated region handling, half-open findRegion
src/renderer/src/crud/useWaveSurfer.tsx Plumb markVersesTailOpenRef and targetRegion into wsGoto / applyRegionAtPosition
src/renderer/src/components/WSAudioPlayer.tsx Expose applyMarkVersesRegionColors and accept targetRegion in gotoTime
src/renderer/src/components/PassageDetail/PassageDetailPlayer.tsx Forward markVersesTailOpenRef prop
src/renderer/src/components/PassageDetail/PassageDetailMobileDetail.tsx Mark Verses layout uses a flex column with hidden overflow
src/renderer/src/components/PassageDetail/PassageDetailMarkVerses.tsx Desktop: row click-to-seek, debounced autosave, status colors, removal of explicit Save/Confirm UI
src/renderer/src/components/PassageDetail/mobile/MarkVerses/PassageDetailMarkVersesIsMobile.tsx Mobile: undo stack, autosave, tail-incomplete tracking, redistribute-on-save, click-to-seek
src/renderer/src/components/PassageDetail/mobile/MarkVerses/MarkVersesTableIsMobile.tsx Replace TextField references with read-only Typography rows
src/renderer/src/components/PassageDetail/mobile/MarkVerses/EditReferenceDropdown.tsx Passage-verse driven end-verse <select>, conditional suffix selects, conditional split checkbox
src/renderer/src/business/player/usePlayerLogic.ts Tolerance-based segment matching for onCurrentSegment
src/renderer/src/tests/refMatch.test.ts Tests for new 1:22a-b style ranges
src/renderer/src/components/PassageDetail/mobile/MarkVerses/PassageDetailMarkVersesIsMobile.{test,cy}.tsx Updated tests for text-based references, click-to-seek, reset confirmation, new dialog behavior

Comment thread src/renderer/src/components/PassageDetail/PassageDetailMarkVerses.tsx Outdated

Copilot AI left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

Copilot reviewed 21 out of 21 changed files in this pull request and generated 3 comments.

Comment thread src/renderer/src/crud/useWavesurferRegions.tsx
Comment thread src/renderer/src/crud/useWaveSurfer.tsx
- Improved segment matching logic in usePlayerLogic for better accuracy.
- Updated WSAudioPlayer to support new markVersesTailOpenRef prop for managing verse states.
- Enhanced PassageDetailMarkVerses to handle incomplete verse rows and apply region colors dynamically.
- Refactored EditReferenceDropdown to manage end verse options and suffix handling more effectively.
- Improved MarkVersesTableIsMobile to allow for better interaction and visual feedback based on segment states.
- Added tests to ensure correct behavior of new features and UI changes.

Enhance PassageDetailMarkVersesIsMobile tests

- Updated existing test to verify that the reference input is not read-only when editable.
- Added new test to ensure the reference input remains read-only and disabled when the row lacks timestamps.
- Improved interaction feedback for better user experience in mobile view.

Recomendations from UX (AI 2nd draft)

- Clicking + to add segment while playing should not stop playing but it does.
- Marking verses should autosave (remove Save button)
- After adding segment, the position is set to the beginning of the preceeding segment instead of the new segment. I think this used to work better. Also the second segment is yellow for active even though the position is in the first segment which is shown as completed.
- When you click in a segment region (except the first) you have to press Play twice to play.
- When you click add a segment boundary and click play, it plays the segment before. I think this used to work better on the last commit.
- When undoing a boundary deletion. the table correctly shows the segment boundaries but the boundary does not show on the wave form.
- We can mark a verse to be 1:11a but then the following verse should start with 1:11b (instead of 12)
- The reset button still shows after the Mark Verses wave form and table are reset and there is nothing more to reset.

Recomendations from UX (AI 1st draft)

- Add segment while playing should not stop playing
- Marking verses should autosave (remove Save button)
- After adding segment, you have to tap Play twice to resume
- Related: The design shows that the succeeding segment should be selected after adding, not the preceding. This was a specific request from you, so I'm wondering if you're unaware that this is not working?
- The rows should not be editable. Please also remove the textfield-style underline for the Reference cells. I do see some merit to this for the desktop, but on mobile devices, showing the keyboard every tap is very distracting. (I did not run this local branch on my mobile device.)
- The rows should be in a scrollable area, not the whole page. Moving to a scrollable table will reduce the scrollable space, so you'll at that point really need to focus on minimizing the vertical space consumed by the rest of the page. For example, the Plus/Minus row consumes a lot of height. Same for the Play/Duration row.
- After you do this comment, the next important thing to do is to scroll to the row when selecting a segment in the waveform. (Right now it's a little frustrating that all the later rows are highlighted offscreen.)
- The Edit Reference doesn't appear to support spanning chapters. This was a request during the design phase. Maybe it's not MVP?
- The Edit Reference dropdown numbers look really large. Maybe Jiho can help with general styling and spacing these new pages.
- When deleting a boundary, the waveform and table highlights get out of sync, and it appears to select the segment after where the cursor is.
- I like the way the Minus button works with segment selection, even though it doesn't match the design.
- Undo seems broken. It's more of a question in the design whether or not we need it, but in its current state it is not very useful.
- Undo seems to undo more than the previous action.
- Undo seems to not appear many times, e.g. add, delete, etc.
- Undo also seems to disappear after one undo operation. Is it just saving the most recent action? It's pretty difficult to test in its current state.
- Save navigates away from the page? It appears to also do a Step Complete, which should not be happening either. These issues should go away if you can accomplish autosave for this step.
- I'm not really sure how to mark something as just a partial verse, e.g. 1:11a. This may be a flaw in the design. Do you know how to do this in the app? (other than manual entry in the row)
- Reset does not remove the table row highlight (visual quirk)
- Reset is not recoverable. Either do a confirmation dialog or make it undo-able.

feat: enhance verse marking functionality with letter suffix handling and autosave improvements

feat: improve playback handling during region splits to prevent unwanted seeks

feat: enhance verse parsing and suffix handling in mark verses functionality

Fix static reported issues.

Enhance refMatch functionality to support same verse letter ranges and improve test coverage for edge cases. Added tests for valid and invalid letter suffix scenarios.

Enhance PassageDetailMarkVersesIsMobile test by adding isPlaying mock function to improve playback state handling during tests.

Refactor PassageDetailMarkVersesIsMobile by removing unused cell change handling and clipboard parsing functions. Updated MarkVersesTableIsMobile props to streamline verse marking functionality.

Update PassageDetailMarkVerses to use dynamic RGBA values for completed and current verse backgrounds, enhancing visual feedback for verse marking functionality.

Refactor PassageDetailMarkVerses to simplify row highlighting logic by utilizing applyRowHighlight function, improving code readability and maintainability.
@gtryus gtryus force-pushed the TT-7300-mark-vrs-hilite branch from 24f4431 to 1758b2c Compare May 26, 2026 20:39
@gtryus gtryus requested a review from Copilot May 26, 2026 20:40

Copilot AI left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

Copilot reviewed 30 out of 32 changed files in this pull request and generated 3 comments.

Comment thread src/renderer/src/crud/useWavesurferRegions.tsx
Comment thread src/renderer/src/crud/useWavesurferRegions.tsx
@sarahentzel sarahentzel merged commit ff30a54 into develop May 26, 2026
3 checks passed
@sarahentzel sarahentzel deleted the TT-7300-mark-vrs-hilite branch May 26, 2026 21:46
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants